<script setup lang="ts">
import {useSlots} from 'vue'
import {NSwitch} from 'naive-ui'
import {StnSwitchProps} from './type.ts'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnSwitch',
})

/**
 * 组件参数
 */
const {
  size = 'small',
  checkedText = '开启',
  uncheckedText = '关闭',
  props = {},
} = defineProps<StnSwitchProps>()

/**
 * 组件双向数据绑定
 */
const value = defineModel<boolean | 1 | 0>('value', {default: false})

/**
 * 组件插槽
 */
const slots = useSlots()
</script>

<template>
  <n-switch
    v-bind="{
      ...props,
      size,
      value,
      'onUpdate:value': (newVal: boolean) => value = newVal,
    }"
  >
    <template v-if="checkedText.length > 0" #checked>{{ checkedText }}</template>
    <template v-if="uncheckedText.length > 0" #unchecked>{{ uncheckedText }}</template>
    <template
      v-for="(_, name) in slots"
      v-if="name !== 'checked' && name !== 'unchecked'"
      :key="name"
      #[name]
    >
      <slot :name="name"></slot>
    </template>
  </n-switch>
</template>

<style scoped>
.stn-switch {
  color: inherit;
}
</style>
